<template>
	<view>
		<view class="other_order">
			<swiper class="swiper" :current="currentIndex" @change="swiperChange" :duration="500">
				<swiper-item v-for="item in Math.ceil(otherOrderTypeList.length / 10)" :key="item">
					<view class="swiper-item">
						<view class="swiper-item_row" style="margin-bottom: 44upx;">
							<view class="order_item"
								v-for="(v,i) in otherOrderTypeList.slice(10*(item-1),5+10*(item-1))" :key="i" @click="onGo(v.url)">
								<view class="order_img">
									<image :src="`https://wx.2024csnl.com/static/home/${v.img}.png`" mode=""></image>
								</view>
								<view class="order_name">{{v.name}}</view>
							</view>
							<view class="order_item"
								v-if="otherOrderTypeList.slice(10*(item-1),5+10*(item-1)).length<5" ></view>
							<view class="order_item"
								v-if="otherOrderTypeList.slice(10*(item-1),5+10*(item-1)).length<4" ></view>
							<view class="order_item"
								v-if="otherOrderTypeList.slice(10*(item-1),5+10*(item-1)).length<3" ></view>
							<view class="order_item"
								v-if="otherOrderTypeList.slice(10*(item-1),5+10*(item-1)).length<2" ></view>
						</view>
						<view class="swiper-item_row">
							<view class="order_item"
								v-for="(v,i) in otherOrderTypeList.slice(5+10*(item-1),10+10*(item-1))" :key="i" @click="onGo(v.url)">
								<view class="order_img">
									<image :src="`https://wx.2024csnl.com/static/home/${v.img}.png`" mode=""></image>
								</view>
								<view class="order_name">{{v.name}}</view>
							</view>
							<view class="order_item" v-if="otherOrderTypeList.slice(5+10*(item-1),10+10*(item-1))<5">
							</view>
							<view class="order_item" v-if="otherOrderTypeList.slice(5+10*(item-1),10+10*(item-1))<4">
							</view>
							<view class="order_item" v-if="otherOrderTypeList.slice(5+10*(item-1),10+10*(item-1))<3">
							</view>
							<view class="order_item" v-if="otherOrderTypeList.slice(5+10*(item-1),10+10*(item-1))<2">
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="indicator-dots">
				<view class="">
					<view :class="currentIndex==item-1?'active':''"
						v-for="item in Math.ceil(otherOrderTypeList.length / 10)" :key="item"></view>
				</view>
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		name: "m-tab-list",
		data() {
			return {
				currentIndex: 0,
			};
		},
		props: {
			otherOrderTypeList: {
				type: Array,
				default: ''
			}
		},
		methods: {
			onGo(url){
				this.onSkip(url)
			},
			swiperChange(e) {
				this.currentIndex = e.detail.current
			},
		}
	}
</script>

<style lang="scss" scoped>
	.other_order {
		padding-top: 10upx;

		.swiper {
			// height: 280upx;
			height: 340upx;
		}

		.swiper-item {
			padding: 30upx 0;

			.swiper-item_row {
				display: grid;
				grid-template-columns: repeat(5,1fr);
				// display: flex;
				// align-items: center;
				// justify-content: space-between;
				padding: 0 34upx;
				box-sizing: border-box;

				.order_item {
					text-align: center;
					width: 114upx;

					.order_img {
						image {
							width: 70upx;
							height: 70upx;
						}
					}

					.order_name {
						font-size: 26upx;
						color: #333;
					}
				}

			}
		}

		.indicator-dots {
			display: flex;
			justify-content: center;
			padding-bottom: 26upx;

			>view {
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
				justify-content: center;

				>view {
					width: 40upx;
					height: 6upx;
					background-color: #E6E6E6;
				}

				.active {
					background-color: #41644A;
				}
			}
		}
	}
</style>
